<template>
  <div>
    <div v-show="false">{{ height }}{{ width }}{{ chartsValue }}{{ foreColor }}</div>
    <div :id="detail.identifier" ref="chartView" class="view-chart-pie"/>
  </div>

</template>

<script>
// import echarts from "echarts";

import {color} from 'echarts';
import BaseView from '../View';
import request from "@/utils/request";

export default {
  name: 'ViewChartPie',
  extends: BaseView,
  computed: {
    width() {
      this.$nextTick(function () {
        this.myChart.resize({
          width: this.detail.style.position.w,
          height: this.detail.style.position.h
        });
      });
      return this.detail.style.position.w
    },
    height() {
      this.$nextTick(function () {
        this.myChart.resize({
          width: this.detail.style.position.w,
          height: this.detail.style.position.h
        });
      });
      return this.detail.style.position.h
    },
    chartsValue() {
      //将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新
      this.$nextTick(function () {
        let current = {
          warnNumber: 0,
          onLineNumber: 0,
          offLineNumber: 0,
          warnRecordProcessedNum: 0,
          warnRecordUntreatedNum: 0,
          orderRecordProcessedNum: 0,
          orderRecordUntreatedNum: 0,
          orderRecordAbandonNum: 0,
        }
        if (this.detail.style.pieType == '设备状态') {
          this.myChart.setOption(this.getDeviceChartsData(current))
        } else if (this.detail.style.pieType == '报警状态') {
          this.myChart.setOption(this.getWarnChartsData(current))
        } else {
          this.myChart.setOption(this.getOrderChartsData(current))
        }
      });
      return this.detail.style.pieType;
    },
    foreColor() {
      this.$nextTick(function () {
        this.getStaticData();
      });
      return this.detail.style.foreColor;
    },
  },
  data() {
    return {
      myChart: null,
      option: {},
      timer: null,
    }
  },
  methods: {
    getStaticData() {
      let query = {
          guid : this.$route.query.guid,
      }
      let url = "/zutai/bDeviceManager/getDevice"
      request({
        url: url,
        method: "get",
        params: query,
      }).then((response) => {
        // console.log("获取饼图数据",response.data);
        if (this.detail.style.pieType == '设备状态') {
          this.myChart.setOption(this.getDeviceChartsData(response.data))
        } else if (this.detail.style.pieType == '报警状态') {
          this.myChart.setOption(this.getWarnChartsData(response.data))
        } else {
          this.myChart.setOption(this.getOrderChartsData(response.data))
        }

      })
    },
    //设备状态
    getDeviceChartsData(currData) {
      let option = {
        color: ['#1296DB', '#515151', '#FF7070',],  // '#5C7BD9',
        title: {
          text: '设备状态',
          left: 'center',
          textStyle: {
            fontFamily: 'Microsoft YaHei',
            fontStyle: "normal",
            fontWeight: "normal",//标题颜色
            color: this.detail.style.foreColor
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          top: '10%',
          left: 'center',
          textStyle: {color: this.detail.style.foreColor}
        },
        series: [
          {
            name: '网关设备',
            type: 'pie',
            radius: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              // borderRadius: 10,
              // borderColor: '#fff',
              // borderWidth: 0
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: currData.onLineNumber,
                name: '在线 ' + (currData.onLineNumber),
                label: {color: this.detail.style.foreColor}
              },
              {
                value: currData.offLineNumber,
                name: '离线 ' + currData.offLineNumber,
                label: {color: this.detail.style.foreColor}
              },
              {
                value: currData.warnNumber,
                name: '报警 ' + currData.warnNumber,
                label: {color: this.detail.style.foreColor}
              }
            ]
          }
        ]
      }
      return option
    },
    //报警状态
    getWarnChartsData(currData) {
      let option = {
        color: ['#1296DB', '#FF7070',],  // '#5C7BD9',
        title: {
          text: '报警状态',
          left: 'center',
          textStyle: {
            fontFamily: 'Microsoft YaHei',
            fontStyle: "normal",
            fontWeight: "normal",//标题颜色
            color: this.detail.style.foreColor
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          top: '10%',
          left: 'center',
          textStyle: {color: this.detail.style.foreColor}
        },
        series: [
          {
            name: '网关设备',
            type: 'pie',
            radius: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: currData.warnRecordProcessedNum,
                name: '已处理 ' + currData.warnRecordProcessedNum,
                label: {color: this.detail.style.foreColor}
              },
              {
                value: currData.warnRecordUntreatedNum,
                name: '未处理 ' + (currData.warnRecordUntreatedNum),
                label: {color: this.detail.style.foreColor}
              }
            ]
          }
        ]
      }
      return option
    },
    //工单状态
    getOrderChartsData(currData) {
      let option = {
        color: ['#2979ff', '#fa3534', '#ff9900'],  // '#5C7BD9',
        title: {
          text: '工单状态',
          left: 'center',
          textStyle: {
            fontFamily: 'Microsoft YaHei',
            fontStyle: "normal",
            fontWeight: "normal",//标题颜色
            color: this.detail.style.foreColor
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          top: '10%',
          left: 'center',
          textStyle: {color: this.detail.style.foreColor}
        },
        series: [
          {
            name: '网关设备',
            type: 'pie',
            radius: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: currData.orderRecordProcessedNum,
                name: '已巡检 ' + currData.orderRecordProcessedNum,
                label: {color: this.detail.style.foreColor}
              },
              {
                value: currData.orderRecordUntreatedNum,
                name: '未巡检 ' + (currData.orderRecordUntreatedNum),
                label: {color: this.detail.style.foreColor}
              },
              {
                value: currData.orderRecordAbandonNum,
                name: '已废弃 ' + currData.orderRecordAbandonNum,
                label: {color: this.detail.style.foreColor}
              },
            ]
          }
        ]
      }
      return option
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById(this.detail.identifier));
    this.getStaticData();
    this.timer = setInterval(() => {
      this.getStaticData();
    }, 60000);
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null;
  },

}
</script>

<style lang="scss">
.view-chart-pie {
  height: 100%;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
